<template>
    <div class="cashback">
      <div class="order-list">
        <OrderList :listData="initData" :title="titleStr" :isShowTime ="true" :btnText ="'Cashback Now'" :nextPage ="'guide'"  :noData ="noData" :Loading="Loading"></OrderList>
        <pageination :pages="1" :changePage="changePage"></pageination>
      </div>
    </div>
</template>

<script>
  import OrderList from 'components/order-list/order-list'
  import {getRequests, getTotal} from "api/requests"
  import Pageination from 'base/pageination/pageination'
  import monitoring from '../../common/js/monitoring';
  export default {
    data() {
      return {
        initData: [],
        total: 0,
        titleStr :'Your Cart',
        noData: false,
        Loading: false,
        pages: 1,
        current_page: 1
      }
    },
    computed: {

    },
    created() {
      monitoring.openCashbackCart();//todo Facebook Pixel & Google Analytic Code    openCashbackCart
      this.$nextTick(() => {
        this._getRequests()
      })
    },
    methods: {
      changePage(num) {
        this.current_page = num
        this.initData = []
        this._getRequests()
      },
      _getRequests() {
        this.noData = false
        this.Loading = true
        getRequests(this.current_page,20).then((res) => {
          this.Loading = false
          this.initData = res.data
          this.pages = res.totalPages
          if(res.data.length === 0){
            this.noData = true
          }
        })
      }
    },
    watch: {
      '$route'(to, from) {
        if (to.path === '/user-requests') {
          this._getRequests()
        }
      }
    },
    components: {
      OrderList,
      Pageination
    }
  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .cashback
    width:100%
    .order-list
      margin-top:30px;
</style>
